<template>
    <div>
        <user-form
            :name="name"
            :passWord="passWord"
            v-model="aaa"
            :obj="obj"
            @submit="submit2"
            :msg="msg"
            @fromDemo='Fdemo'
        ></user-form>
        <div>
            <el-button @click="changeName">改变name值为Wayne</el-button>
            <el-button @click="changePassword">改变password</el-button>
            <el-button @click="msg='new vue'">toggle</el-button>
            <el-button>toggle</el-button>
        </div>

        <model
            v-model="show"
        ></model>
        <el-button @click="openModel">打开model</el-button>
    </div>
</template>
<script>
import userForm from '../components/UserForm';
import model from '../components/Model';

export default {
    components : {
        userForm,
        model
    },
    data(){
        return {
            name : 'Judy',
            passWord : "123",
            aaa : 123123,
            obj:{
                name : 'judy'
            },
            msg:'vue',
            show:true
        }
    },
   
    watch: {
        aaa (v){
            console.log( v )
        },
        show(newVal,oldVal){
            console.log(newVal,oldVal)
        }
    },
    mounted() {
        console.log(this.aaa)
    },
    created(){
        
    },
    methods: {
        changeName(){
            this.name = 'Wayne'
        },
        changePassword(){
            this.passWord = "321123"
        },
        submit2(v){
            console.log(v)
            // console.log(this.aa)
            alert(v[0])
            v[0] = 'hahha'
        },
        changeVue(){
            console.log(this.msg)
            // if(this.msg == 'vue'){
            //     this.msg = 'new vue'
            // }else{
            //     this.msg = 'vue'
            // }
        },

        waitTime() {
            return new Promise(resolve=>{
                setTimeout(()=> {
                    this.msg = '数据一秒后改变了'
                    resolve(1)
                },1000)
            })
        },
        async Fdemo () {
            let a = await this.waitTime(); //等待着上一个执行完毕
            console.log(a)
        },
        openModel(){
            this.show = true;
        }
    
    },

}
</script>